Next.js 15の新機能を徹底解説

Vercelが開発するReactフレームワークNext.jsの最新バージョン「Next.js 15」がリリースされました。本記事ではパフォーマンスと開発体験を大きく向上させた新機能を、実際のコード例とともに徹底解説します。

1. Turbopack安定版リリース

最大のハイライトはTurbopackの安定版リリースです。Rustで書かれたこのバンドラーは、開発サーバーの起動とHMRを劇的に高速化します。

• 開発サーバー起動：Webpack比で最大 76%高速
• HMR：最大 96%高速
• メモリ使用量：大規模プロジェクトで 40%削減

# Next.js 15ではTurbopackがデフォルトで有効
npx next dev

# 明示的に指定する場合
npx next dev --turbopack

# プロダクションビルドでも利用可能に
npx next build --turbopack

2. React Server Componentsの進化

Server Actions（サーバー上で直接実行される関数）の型安全性とエラーハンドリングが大幅に強化されました。

// app/actions.ts
'use server'
import { z } from 'zod'
import { revalidatePath } from 'next/cache'

const PostSchema = z.object({
  title: z.string().min(1, 'タイトルは必須'),
  content: z.string().min(10, '10文字以上'),
})

export async function createPost(formData: FormData) {
  const validated = PostSchema.safeParse({
    title: formData.get('title'),
    content: formData.get('content'),
  })
  if (!validated.success) {
    return { error: validated.error.flatten() }
  }
  await db.posts.create({ data: validated.data })
  revalidatePath('/blog')
  return { success: true }
}

3. 新しいキャッシング戦略

Next.js 15では、キャッシュの仕組みが大幅にシンプル化されました。デフォルトでキャッシュしない方針に変更され、明示的な制御が必要になりました。

// Next.js 15: 明示的なキャッシュ制御

// キャッシュしない（デフォルト）
const data = await fetch('https://api.example.com/posts')

// 明示的にキャッシュ + 1時間ごと再検証
const cached = await fetch('https://api.example.com/posts', {
  cache: 'force-cache',
  next: { revalidate: 3600 }
})

4. Partial Prerendering (PPR)

Partial Prerenderingは革新的な機能で、1つのページ内に静的な部分と動的な部分を共存させます。

// app/page.tsx - PPRの例
import { Suspense } from 'react'

export default function HomePage() {
  return (
    <main>
      {/* 静的: ビルド時に生成、CDNから即配信 */}
      <h1>TechPulse</h1>

      {/* 動的: リクエスト時にストリーミング */}
      <Suspense fallback={<Skeleton />}>
        <LatestArticles />
      </Suspense>

      <Suspense fallback={<Skeleton />}>
        <PersonalizedContent />
      </Suspense>
    </main>
  )
}

5. まとめ

• Turbopack安定版で開発速度が劇的に向上
• Server Actions強化で型安全なサーバー処理が容易に
• キャッシュのシンプル化でデバッグが容易に
• PPRで静的・動的の良いとこ取り

移行はnpx @next/codemod@latest upgrade latestで自動化できます。積極的にアップグレードを検討してみてください。